import {} from 'https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js'; //引入jquery类库
import {} from 'https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js'; //引入懒加载插件
import {} from './jquery.pagination.js'; //引入分页插件


function doShowList() {
    // 排序操作
    // 定义数组存放li标签
    let arr_list = []; //排序后的页面li的数组
    let arr_initial_list = [] //初始页面li的数组

    $.ajax({
        url: 'http://10.31.157.18/changhong/php/list.php',
        dataType: 'json'
    }).done(function(objData) { //data数据是一个对象格式的数据 
        let arrData = objData.pagecontent //渲染的数据
        let strHtml = '';
        $.each(arrData, function(index, value) { //遍历 逐一渲染
            strHtml += `
            <li>
            <a href="detail.html?sid=${value.sid}">
            <img data-original="${value.picurl}" class="lazy" />
            <p>${value.title}</p>
                <span class="pic">￥${value.price}</span>
                <em>10人评价</em>
            </a>
            <div>
                <span>对比</span>
                <span>收藏</span>
                <span>加购</span>
            </div>
        </li> 
            `;
        });
        $('.goodlist ul').html(strHtml)

        arr_list = []; //排序后的页面li的数组
        arr_initial_list = [] //初始页面li的数组

        // 遍历li元素 存进数组 
        $('.goodlist ul li').each(function(index, element) {
                arr_list.push($(element));
                arr_initial_list.push($(element)); //保留默认排序
            })
            // 图片懒加载
        $(function() {
            $("img.lazy").lazyload({ effect: "fadeIn" });
        });



        // 分页
        $('.page').pagination({
            pageCount: objData.pagesize, //总的页数
            jump: true, //是否开启跳转到指定的页数，布尔值。
            prevContent: '上一页', //将图标改成上一页下一页。
            nextContent: '下一页',
            callback: function(api) {
                console.log(api.getCurrent()); //获取当前的点击的页码。
                //将页面传给后端
                $.ajax({
                    url: 'http://10.31.157.18/changhong/php/list.php',
                    data: {
                        page: api.getCurrent()
                    },
                    dataType: 'json'
                }).done(function(objData) { //data数据是一个对象格式的数据
                    let arrData = objData.pagecontent //渲染的数据
                    let strHtml = '';
                    $.each(arrData, function(index, value) { //遍历 逐一渲染
                        strHtml += `
                        <li>
                        <a href="detail.html?sid=${value.sid}">
                        <img data-original="${value.picurl}" class="lazy" />
                        <p>${value.title}</p>
                            <span class="pic">￥${value.price}</span>
                            <em>10人评价</em>
                        </a>
                        <div>
                            <span>对比</span>
                            <span>收藏</span>
                            <span>加购</span>
                        </div>
                    </li> 
                        `;
                    });
                    $('.goodlist ul').html(strHtml)

                    arr_list = []; //排序后的页面li的数组
                    arr_initial_list = [] //初始页面li的数组

                    // 遍历li元素 存进数组 
                    $('.goodlist ul li').each(function(index, element) {
                            arr_list.push($(element));
                            arr_initial_list.push($(element)); //保留默认排序
                        })
                        // 图片懒加载
                    $(function() {
                        $("img.lazy").lazyload({ effect: "fadeIn" });
                    });
                });
            }
        });
    });


    function sort() {
        // 默认排序
        $('.default').on('click', function() {
            $.each(arr_initial_list, function(index, value) {
                $('.goodlist ul').append(value);
            });
            $('.drop').addClass('hid').siblings('.rise').removeClass('hid'); //点击默认排序后价格升序按钮回到升序按钮
        })

        // 价格升序
        $('.sort .rise').on('click', function() {
            $(this).addClass('hid').siblings('.drop').removeClass('hid');
            for (let i = 0; i < arr_list.length - 1; i++) {
                for (let j = 0; j < arr_list.length - i - 1; j++) {
                    let prev = parseFloat(arr_list[j].find('.pic').html().substring(1));
                    let next = parseFloat(arr_list[j + 1].find('.pic').html().substring(1));
                    if (prev > next) {
                        let temp = arr_list[j];
                        arr_list[j] = arr_list[j + 1];
                        arr_list[j + 1] = temp;
                    }
                }
            }
            $.each(arr_list, function(index, value) {
                $('.goodlist ul').append(value);
            })
        })

        // 价格降序
        $('.sort .drop').on('click', function() {
            $(this).addClass('hid').siblings('.rise').removeClass('hid')
            for (let i = 0; i < arr_list.length - 1; i++) {
                for (let j = 0; j < arr_list.length - i - 1; j++) {
                    let prev = parseFloat(arr_list[j].find('.pic').html().substring(1));
                    let next = parseFloat(arr_list[j + 1].find('.pic').html().substring(1));
                    if (prev < next) {
                        let temp = arr_list[j];
                        arr_list[j] = arr_list[j + 1];
                        arr_list[j + 1] = temp;
                    }
                }
            }
            $.each(arr_list, function(index, value) {
                $('.goodlist ul').append(value);
            })
        });
    }

    sort();



    function topNavTap() {
        let btns = $('.tab_list li');
        let items = $('.tab_content .item');
        btns.not($('.first')).hover(function() {
            $(this).addClass('active').siblings('li').removeClass('active');
            items.eq($(this).index() - 1).show().siblings('.item').hide();
            $('.tab_content').show();

            $('.tab_content').hover(() => {
                $('.tab_content').show();
                btns.eq(items.index()).addClass('active');
                console.log($(this));
                $(this).addClass('active').siblings('li').removeClass('active');
            }, () => {
                $('.tab_content').hide();
                btns.removeClass('active');
            })
        }, function() {
            $('.tab_content').hide();
            btns.removeClass('active')
        });
    }
    topNavTap();

}

doShowList();